<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>上传OSS</title>
        <style>
            /* http://meyerweb.com/eric/tools/css/reset/ */
            /* v1.0 | 20080212 */

            html,
            body,
            div,
            span,
            applet,
            object,
            iframe,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            p,
            blockquote,
            pre,
            a,
            abbr,
            acronym,
            address,
            big,
            cite,
            code,
            del,
            dfn,
            em,
            font,
            img,
            ins,
            kbd,
            q,
            s,
            samp,
            small,
            strike,
            strong,
            sub,
            sup,
            tt,
            var,
            b,
            u,
            i,
            center,
            dl,
            dt,
            dd,
            ol,
            ul,
            li,
            fieldset,
            form,
            label,
            legend,
            table,
            caption,
            tbody,
            tfoot,
            thead,
            tr,
            th,
            td {
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
                font-size: 100%;
                vertical-align: baseline;
                background: transparent;
            }
            body {
                line-height: 1;
            }
            ol,
            ul {
                list-style: none;
            }
            blockquote,
            q {
                quotes: none;
            }
            blockquote:before,
            blockquote:after,
            q:before,
            q:after {
                content: "";
                content: none;
            }

            /* remember to define focus styles! */
            :focus {
                outline: 0;
            }

            /* remember to highlight inserts somehow! */
            ins {
                text-decoration: none;
            }
            del {
                text-decoration: line-through;
            }

            /* tables still need 'cellspacing="0"' in the markup */
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
        </style>
        <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.16.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
        <script>
            var vConsole = new window.VConsole();
        </script>
    </head>
    <style>
        #app {
            width: 100vw;
            height: 100vh;
        }

        .uploadBtn {
            display: block;
            margin-top: 10px;
        }

        .loading {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 99;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: #fff;
        }

        #uploadInput {
            margin-left: 16px;
        }

        .preview {
            width: 80vw;
            display: block;
            margin: 16px auto;
        }
        .single {
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-right: 100px solid transparent;
            border-left: 100px solid transparent;
            border-bottom: 100px solid red;
        }
    </style>
    <body>
        <div id="app">
            <div style="margin: 16px">上传文件不可大于100MB</div>
            <input type="file" id="uploadInput" value="选择文件" />
            <button type="button" @click="uploadFile">点击上传</button>
            <div style="margin: 16px">{{url?url:'暂无内容'}}</div>
            <div class="loading" v-show="loading">上传中。。。</div>
        </div>
    </body>
    <script>
        const endpoint = "http://oss-cn-beijing.aliyuncs.com";
        const accessKeyId = "LTAI5tFEBVE33mjdtDT5yG3V";
        const accessKeySecret = "RhWw2eB4ukfaFq1GDHX8DoLctdTeag";
        const bucket = "bonetoday";
        var app = new Vue({
            el: "#app",
            name: "app",
            data: {
                file: null,
                url: "",
                loading: false
            },
            methods: {
                uploadFile() {
                    if (!this.file) {
                        alert("上传不得为空！");
                        return false;
                    }
                    this.loading = true;
                    this.uploadToOss(this.file)
                        .then(res => {
                            this.loading = false;
                            alert("上传成功");
                            this.url = res;
                            console.log("上传成功---" + res);
                        })
                        .catch(err => {
                            this.loading = false;
                            console.log(err);
                            alert("上传失败");
                        });
                },
                uploadToOss(file) {
                    return new Promise((resolve, reject) => {
                        const client = new OSS({
                            endpoint,
                            accessKeyId,
                            accessKeySecret,
                            bucket
                        });

                        let name = this.reFileName(file.name);

                        client
                            .put(name, file)
                            .then(res => {
                                console.log(res);
                                let url = res.url;
                                resolve(url);
                            })
                            .catch(err => {
                                console.log(err);
                                reject();
                            });
                    });
                },
                reFileName(fileName) {
                    // 取文件后缀
                    let suffixName = fileName;
                    if (fileName.lastIndexOf(".") != -1) {
                        suffixName = fileName.substring(fileName.lastIndexOf("."));
                    }
                    let name = `meetingAdminFile/${getDate()}/admin${guid()}${parseInt(new Date().getTime())}${suffixName}`;
                    return name;
                }
            }
        });

        // 绑定事件监听函数
        $(function () {
            $("#uploadInput").bind("input propertychange", function () {
                app.file = document.getElementById("uploadInput").files[0];
            });
        });

        /**
         * 获取uuid
         */
        function guid() {
            return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
                var r = (Math.random() * 16) | 0,
                    v = c == "x" ? r : (r & 0x3) | 0x8;
                return v.toString(16);
            });
        }

        /**
         * 获取年月日
         */
        function getDate() {
            var myDate = new Date();
            myDate.getFullYear(); //获取完整的年份(4位,1970-????)
            myDate.getMonth(); //获取当前月份(0-11,0代表1月)
            myDate.getDate(); //获取当前日(1-31)
            var day = myDate.getDate() >= 10 ? myDate.getDate() : "0" + myDate.getDate();
            var month = myDate.getMonth() + 1 >= 10 ? myDate.getMonth() + 1 : "0" + (myDate.getMonth() + 1);
            myDate.toLocaleDateString(); //获取当前日期
            return myDate.getFullYear() + "-" + month + "-" + day;
        }
    </script>
</html>
